<template>
  <el-main v-loading="loading">
    <el-button type="danger" size="medium" @click="batchDelNews">批量删除</el-button>

    <el-table
      ref="multipleTable"
      :data="pageInfo.list"
      height="79vh"
      border
      tooltip-effect="dark"
      style="width: 100%; margin-top:20px;"
      @select-all="handleSelectAll"
      @selection-change="handleSelectionChange">
      <el-table-column type="expand">
        <template slot-scope="props">
          <div v-if="props.row.news.photos" style="margin-left:46px;">
            <el-image v-for="(photo,index) in props.row.news.photos.split(',')" :key="index"
              style="width: 138px; height: 138px;margin-left: 2px;margin-right: 2px;"
              :src="photo" 
              fit="cover"
              :preview-src-list="props.row.news.photos.split(',')">
            </el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        type="selection"
        width="55"
        align="center">
      </el-table-column>
      <el-table-column
        prop="news.releaseTime"
        label="发布时间"
        sortable
        width="180"
        align="center">
      </el-table-column>
      <el-table-column
        prop="news.user.nickname"
        label="发布用户"
        width="140"
        align="center">
      </el-table-column>
      <el-table-column
        prop="news.content"
        label="内容"
        width="440"
        header-align="center">
      </el-table-column>
      <el-table-column
        prop="communityName"
        label="发布位置"
        :filters="communityFilter"
        :filter-method="filterCommunityHandler"
        width="160"
        align="center">
      </el-table-column>
      <el-table-column
        label="分区"
        :filters="[{text: '邻里分享', value: '邻里分享'}, {text: '帮帮忙', value: '帮帮忙'}, {text: '议事厅', value: '议事厅'}]"
        :filter-method="filterTypeTag"
        filter-placement="bottom-end"
        width="140"
        align="center">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.news.type == 1">邻里分享</el-tag>
          <el-tag v-if="scope.row.news.type == 2">帮帮忙</el-tag>
          <el-tag type="warning" v-if="scope.row.news.type == 3">议事厅</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="okSum"
        label="点赞数量"
        sortable
        width="120"
        align="center">
      </el-table-column>
      <el-table-column
        prop="news.newsComments.length"
        label="评论数量"
        sortable
        width="120"
        align="center">
      </el-table-column>
      <el-table-column
        prop="news.views"
        label="浏览数量"
        sortable
        width="120"
        align="center">
      </el-table-column>
      <el-table-column
        label="操作"
        show-overflow-tooltip
        align="center">
        <template slot-scope="scope">
          <el-popconfirm
            confirm-button-text='好的'
            cancel-button-text='不用了'
            icon="el-icon-info"
            icon-color="red"
            title="确定删除这条动态吗？"
            @confirm="delNews(scope.row)">
            <el-button type="text" slot="reference" size="small">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :page-sizes="[10, 20, 40, 60, 80, 100]"
      :page-size="pageInfo.pageSize"
      :total="pageInfo.totalRecord"
      layout="prev, pager, next, sizes, total"
      style="margin-top:16px;">
    </el-pagination>
  </el-main>
</template>

<script>
  export default{
    data(){
      return {
        /* 是否加载状态 */
        loading: true,
        /* 页面数据 */
        pageInfo: {
          currentPage: 1, //当前页面，默认1
          pageSize: 10, //页面大小，默认10
          totalRecord: 0, //总条数，默认0
          list: []
        },
        /* 本地的user对象 */
        users:[],
        /* 选中行的user们 */
        selectNews:[],
        registInfo: {
          community:{},
          propertyView: true
        }
      }
    },
    computed:{
    /* 小区过滤器 */
    communityFilter(){
      let filter = []

      for(let newsInfo of this.pageInfo.list){

        //如果存在相同小区名，标记为true
        let flag = false
        for(let f of filter){
          if(f.text == newsInfo.communityName){
            flag = true
            break
          }
        }

        //如果不存在相同小区名，则加入筛选列表
        if(!flag){
          filter.push({text: newsInfo.communityName, value: newsInfo.communityName})
        }
      }

      return filter
    }
  },
    methods: {
      /* 获取动态信息 */
      getPageInfo: function(){
        // 显示加载动画
        this.loading = true;

        /* 获取动态信息刚加载默认查询第一页、10个 */
        this.$axios.get("news/get/0/" + this.pageInfo.currentPage +"/" + this.pageInfo.pageSize).then(res => {
          if(res.data.status == "SUCCESS"){
            //保存数据
            this.pageInfo = res.data.data

            // 结束加载动画
            this.loading = false;
          }else{
            this.$message.error("获取数据失败")
          }
        })
      },
      /* 分页插件当前页选择事件 */
      handleCurrentChange: function(currentPage){
        //同步选择的当前页面
        this.pageInfo.currentPage = currentPage;

        this.getPageInfo()
      },
      /* 分页插件页面大小更改事件 */
      handleSizeChange: function(pageSize){
        //同步选择的页面大小
        this.pageInfo.pageSize = pageSize;

        this.getPageInfo()
      },
      /* 表格全选事件，由于选中钩子不能响应全不选的情况，所以需要此钩子函数判断选中数量为0，清空id们的值 */
      handleSelectAll: function(selection){
        if(selection.length == 0){
          this.selectNews = []
        }
      },
      /* 被选中/取消的钩子，该钩子函数传递的是所有已选中的行数据 */
      handleSelectionChange: function(selection){
        // 先将已保存的user id们清空
        this.selectNews = selection
      },
      /* 发布位置过滤器触发事件 */
      filterCommunityHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },
      /* 动态类型过滤器触发事件 */
      filterTypeTag(value, row) {
        // 如果行中的状态值和筛选内容的value值（也是状态值）一致，返回true
        return row.typeName === value
      },
      /* 删除动态的点击事件 */
      delNews: function(newsInfo){
        this.$axios.delete("http://localhost:8080/news/del/" + newsInfo.news.id).then(res => {
          if(res.data.status == "SUCCESS"){
            this.pageInfo.list.splice(this.pageInfo.list.indexOf(newsInfo), 1)
          }else{
            //删除失败
            this.$message.erro("动态删除失败")
          }
        })

        //添加日志
        this.$axios.post("log/add", {target: "动态管理", type: "删除"})
      },
      /* 批量修改状态 */
      batchDelNews: function(){
        let sum = this.selectNews.length
        let success = 0
        let fail = 0
        for(let newsInfo of this.selectNews){
          this.$axios.delete("http://localhost:8080/news/del/" + newsInfo.news.id).then(res => {
            if(res.data.status == "SUCCESS"){
              // 删除pageInfo中的news对象
              this.pageInfo.list.splice(this.pageInfo.list.indexOf(newsInfo), 1)
              
              success ++
            }else{
              fail ++
            }

            if((success + fail) == sum){
              this.$message(sum + " 个请求执行完成，成功 " + success + "个，失败 " + fail + "个")
            }
          })
        }

        //添加日志
        this.$axios.post("log/add", {target: "动态管理", type: "批量删除 " + this.selectNews.length + "条"})
      },
    },
    mounted(){
      // 获取页面信息
      this.getPageInfo()
    }
  }
</script>

<style scoped>

</style>
